﻿$(function () {
    var rq = $.getRequest();
    let script = `js/province/${rq.id}.js`;
    $.getScript(script).done(function () {
        updataAqiTop(rq.id, rq.name);
    });
    // updataAqiTop(rq.id,rq.name);
});

//更新AQI排行
function updataAqiTop(fsiteNo, fsiteName) {
    $.ajaxGet(baseUri + 'getAQIByUserId', {
        fsiteParent: fsiteNo,
        userId: userId
    },
        function (d) {
            reloadChartBarTop("chart_5", d.list);
            reloadMap("chart_map", d.list, fsiteName)
        });
}

//加载柱状图(排行)
function reloadChartBarTop(id, data) {
    var xArray = data.map(function (d) {
        return { id: d.fsiteNo, name: d.fsiteName, value: d.faqi }
    }).sort(function (a, b) {
        return a.value - b.value;
    });

    var yArray = xArray.map(function (d) {
        return d.name;
    });

    var myChart = echarts.init(document.getElementById(id));
    var option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: { type: 'shadow' },
            formatter: '{b}:<br/>AQI:{c}'
        },
        grid: {
            left: '3%',
            right: '7%',
            top: '10%',
            bottom: '10%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#FFFFFF',
                    fontSize: '10'
                }
            },
            splitLine: {
                show: false,
                lineStyle: {
                    color: ['red']
                }
            },
            axisLine: {
                lineStyle: {
                    color: '#FFFFFF',
                    width: 2,
                }
            }
        },
        yAxis: {
            type: 'category',
            data: yArray,
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#FFFFFF'
                }
            },
            // y轴的颜色和宽度
            axisLine: {
                lineStyle: {
                    color: '#FFFFFF',
                    width: 1,
                }
            }
        },
        series: [
            {
                type: 'bar',
                itemStyle: {
                    normal: {
                        color: function (params) {
                            return getColor(getAqiIndex(params.value));
                        }
                    }
                },
                label: {
                    normal: {
                        show: true,
                        color: 'black',
                        position: 'inside'//文本显示位置
                    }
                },
                data: xArray
            }]
    };

    myChart.setOption(option);

    myChart.on('click', function (params) {
        console.log(params)
        location.href = `site.html?id=${params.data.id}&name=${params.data.name}`;
    });
}
function reloadMap(chartid, data, mapName) {
    let map = data.map(function (d) {
        return {
            id: d.fsiteNo,
            name: d.fsiteName,
            value: [d.fsiteD, d.fsiteL]
        };
    });

    var myChart = echarts.init(document.getElementById(chartid));
    var option = {
        tooltip: {
            trigger: 'item',
        },
        geo: {
            map: mapName,
            label: {
                emphasis: {
                    show: false//设置地理图不显示
                }
            },
            itemStyle: {
                normal: {
                    areaColor: '#ffff00',
                },
                emphasis: {
                    areaColor: '#ffff00'
                }
            }
            , zoom: 1.1
        },
        series: [{
            type: 'effectScatter',
            coordinateSystem: 'geo',
            showEffectOn: 'render',
            rippleEffect: {
                brushType: 'stroke'
            },
            hoverAnimation: true,
            encode: {
                value: 2
            },
            label: {
                normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: true
                }
            },
            data: map,
        }],
    };

    myChart.setOption(option);
    myChart.on('click', function (params) {
        if (params.componentSubType === "effectScatter") {
            var name = $.encode(params.data.name);
            location.href = `site.html?id=${params.data.id}&name=${name}`;
        }
    });
}